<template>
    <div class="addPermissionList">
        <el-dialog
             center
            :before-close="handClose"
            width="30%"
            title="新增管理员"
            :visible.sync="off"
            append-to-body>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="mini" class="demo-ruleForm">
                <el-form-item label="账号" prop="account">
                    <el-input v-model.trim="ruleForm.account"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model.trim="ruleForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="新密码密码" prop="newPassword">
                    <el-input v-model.trim="ruleForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmWord">
                    <el-input v-model.trim="ruleForm.confirmWord"></el-input>
                </el-form-item>
                <el-form-item label="账号类型">
                    <el-select
                        style="width:200px"
                        size="small"
                        v-model="ruleForm.personKind"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="账号类型"
                    >
                        <el-option
                            size="small"
                            v-for="item in managementUserKind"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="create">立即创建</el-button>
            </div>
        </el-dialog>
    </div>
   
</template>

<script>
    import { addPerson } from "@/api/admin.js"
    export default {
        name: "add",
        props: {
            off: {
                type: Boolean
            }
        },
        data(){
            return {
                ruleForm: {
                    account: "",
                    mobile: "",
                    newPassword: "",
                    confirmWord: "",
                    personKind: "",
                },
                personKind: "",
                managementUserKind: [
                    {label: "商超管理员", value: "2"},
                    {label: "农资管理员", value: "3"},
                ],
                rules: {
                     account: [{required: true,message: "账户不能为空",trigger: "blur"}],
                     mobile: [{required: true,message: "手机号不能为空",trigger: "blur"}],
                     newPassword: [{required: true,message: "新密码不能为空",trigger: "blur"}],
                     confirmWord: [{required: true,message: "确认密码不能为空",trigger: "blur"}],
                },
            }
        },
        methods: {
            handClose(){
                this.$emit("update:off", false);
            },
            create(){
                this.$refs.ruleForm.validate((valid) => {
                    if(!valid){
                        return;
                    }else{
                        addPerson({
                            account: this.ruleForm.account,
                            loginPass: this.ruleForm.newPassword,
                            checkPass: this.ruleForm.confirmWord,
                            mobile: this.ruleForm.mobile,
                            type: this.ruleForm.personKind,
                        }).then(
                            res => {
                                console.log("res新增管理员", res);
                                this.$message({
                                    type: "success",
                                    message: "新增管理员成功"
                                });
                                this.$emit("update:off", false);
                                this.$parent.getList();
                                this.ruleForm.resetFields();
                            },
                            err => {}
                        );
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">

</style>